<template>
  <div class="box">
    <div class="cartlist">
      <div class="cart" v-for="item in list" :key="item.id">
        <van-card :price="item.price" :title="item.title">
          <template #thumb>
            <div class="logo">
              <van-checkbox
                v-model="item.checked"
                @change="onchange"
              ></van-checkbox>
              <van-image width="80" height="80" lazy-load :src="item.img" />
            </div>
          </template>
          <template #num>
            <van-stepper v-model="item.num" @change="dian" />
          </template>
        </van-card>
      </div>
    </div>
    <van-sticky :offset-bottom="200">
      <van-submit-bar
        :price="zongjia * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>
    </van-sticky>
    <div class="tabbar">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script setup>
//tabbar
import { computed, ref } from "vue";
const active = ref(1);
//步进器
const value = ref(1);
//复选框
const checked = ref(false);
//mock
const list = ref([]);
import axios from "axios";
axios.get("/getcartlist").then((resp) => {
  console.log(111, resp);
  list.value = resp.data.list;
});

//全选反选
const allchecked = computed({
  get() {
    return list.value.every((item) => item.checked);
  },
  set(val) {
    list.value.forEach((item) => (item.checked = val));
  },
});

//总价
const zongjia = computed(() => {
  let zongjia = 0;
  let xuanzhong = list.value.filter(item => item.checked);
  xuanzhong.forEach((item) => {
    zongjia += item.price * item.num;
  });
  return zongjia;
});

//节流
import jieliu from "../utlis/index";
const dian = jieliu(() => {},800)
</script>
<style lang='scss' scoped>
.logo {
  display: flex;
  justify-content: space-around;
}
.box {
  margin-bottom: 50px;
}
</style>